<template>
  <view class="rescan-btn"
        :class="[alignClass, { 'disabled': disabled }]"
        :style="{ borderRadius: computedRadius,
        background:computedBackground}"
        @click="click">
    <slot>{{ text }}</slot>
  </view>
</template>
<script>
export default {
  name: "myButton",
  props: {
    text: String,
    // 新增 align 参数控制对齐方式
    align: {
      type: String,
      default: 'right', // 可选值：right（右对齐）、bottom（底部垂直排列）
      validator: (value) => ['left', 'right', 'center', 'bottom', 'horizontal'].includes(value?.toLowerCase())
    },
    disabled: {
      type: Boolean,
      default: false
    },
    backgroundValue: String,
    radiusValue: {
      type: Number,
      default: 15
    }
  },
  computed: {
    combinedText() {
      // 优先使用 props 传递的 text
      if (this.text) return this.text;
      // 安全获取插槽内容（兼容纯文本和复杂节点）
      return this.$slots.default?.[0]?.text || '';
    },
    alignClass() {
      return `align-${this.align}`;
    },
    computedBackground() {
      return `${this.backgroundValue}`;
    },
    computedRadius() {
      return `${this.radiusValue}rpx`;
    }
  },
  methods: {
    click() {
      if (this.disabled) return;
      this.$emit('click');
    }
  }
}
</script>
<style scoped lang="scss">
.rescan-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1.8rem;
  line-height: 3.2rem;
  padding: 0 2rem;
  background: #ff3434;
  color: white;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
  text-align: center;


  &.align-right {
    margin-left: auto;
    margin-right: 5rpx;
  }

  &.align-bottom {
    display: flex !important;
    width: calc(100% - 20rpx);
    margin: 10rpx auto;
  }

  &.align-left {
    margin-right: auto;
    margin-left: 5rpx;
  }

  &.align-center {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }

  &.align-horizontal {
    width: auto;
  }

  &:active {
    transform: scale(0.95);
    opacity: 0.8;
  }

  &.align-bottom {
    display: block;
    width: calc(100% - 20rpx);
    box-sizing: border-box;
    margin: 10rpx auto;
  }

  &::after {
    border: none;
  }

  &.disabled {
    background: #ccc !important;
    pointer-events: none;
    opacity: 0.6;
  }
}

@media (max-width: 480px) {
  .rescan-btn {
    font-size: 1rem;
    padding: 0 1rem;

    &.align-bottom {
      display: block;
      width: calc(100% - 20rpx);
      box-sizing: border-box;
      margin: 10rpx auto;
    }
  }
}
</style>
